<!DOCTYPE html>
<html>
<head lang="zh">
  <meta charset="UTF-8">
  <title>Document</title>
  <style>

  </style>
</head>
<body>
<canvas id="canvas2" width="1400" height="800" style="border: 1px solid black"></canvas>
</body>
<!--<script src="js/jquery-1.8.3.min.js"></script>-->
<script>
  var canvas2 = document.getElementById('canvas2')
  var ctx2 = canvas2.getContext('2d')
  function col () {
    for (var i = 0; i < 1400; i += 100) {
      for (var j = 0; j < 800; j += 100) {
        rgb()
        ctx2.fillRect(i, j, 50, 50)
        rgb()
        ctx2.fillRect(i + 50, j + 50, 50, 50)
      }
    }
  }
  function rgb () {
    var ran = parseInt(Math.random() * 255)
    var ran2 = parseInt(Math.random() * 255)
    var ran3 = parseInt(Math.random() * 255)
    var ran4 = Math.random()
      .toFixed(1)
    ctx2.fillStyle = ctx2.fillStyle = 'rgba(' + ran + ',' + ran2 + ',' + ran3 + ',' + ran4 + ')'
  }
  col()
  setInterval(col, 100)

</script>
